<template>
  <div>
    <div class="content f_r_m_c">
      <div class="img">
        <img :src="item.img || item.good_icon || item.thumb" alt="" />
      </div>
      <div class="f_c_sb_m flex-1 ml-20">
        <div class="ellipsis2 font-28">{{ item.good_title || item.name }}</div>
        <div class="f_c" style="width:100%" v-if="pageUrl == 'detail'">
          <span class="font-28 color_EA8B37">助力完成直接到账</span>
          <span v-if="time && pageBargain != 1"
            ><van-count-down
              class="font-24"
              style="color:#EA4237"
              :time="time * 1000"
          /></span>
        </div>
        <div class="f_r_sb_m" style="width:100%" v-else>
          <div class="f_c flex-1">
            <div class="f_r_m_c bar">
              <progressBar
                :item="item"
                :time="time"
                textShow
                :pageBargain="pageBargain"
              ></progressBar>
            </div>
          </div>
          <div
            v-if="pageBargain == 1"
            class="btn f_r_c_c font-22 color_fff"
            :class="[bac_class]"
            @click="clickGoods"
          >
            {{ item.good_type == 2 && item.type == 2 ? "复制兑换码" :  btn_text[item.type]}}
          </div>
          <div
            v-else
            class="btn btn1 f_r_c_c font-22 color_fff"
            @click="clickGoods"
          >
            {{item.type == 2 || item.type == 4?'已达上限':'点击免费拿'}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import progressBar from "./progressBar.vue";
export default {
  components: { progressBar },
  props: {
    item: {
      type: Object,
      default: {},
    },
    pageUrl: {
      type: String,
      default: "",
    },
    time: {
      type: Number,
      default: 0,
    },
    pageBargain: {
      type: String,
      default: "0",
    },
  },
  watch: {
    item: {
      immediate: true,
      handler(val) {},
    },
  },
  data() {
    return {
      btn_bac: [
        "btn_bac_start",
        "btn_bac_proceed",
        "btn_bac_finish",
        "btn_bac_over",
        "btn_bac_start",
        "btn_bac_over",
      ],
      btn_text: ["继续砍价", "立即领取", "已领取", "再次挑战", "已领取"],
    };
  },
  computed: {
    bac_class() {
      return this.btn_bac[this.item.btn_bac_type];
    },
  },
  watch: {
    time(val) {
      console.log("watchtime", val);
    },
  },
  methods: {
    upload(item) {
      console.log("watchGoodsListitemitem", this.item);
    },
    clickGoods() {
      // console.log('his.item.type',this.item.type)
       if(this.item.type == 2 || this.item.type == 4){
        return
       }
      
      if (this.pageBargain == 1 && this.item.good_type == 2) {
        this.$copyText(this.item.str).then(
          () => {
            this.$toast("复制成功");
            // 复制成功的操作
          },
          () => {
            this.$toast("复制失败");
            // 复制失败的操作
          }
        );
        return;
      }
      this.$emit("click", this.item);
    },
  },
};
</script>

<style scoped lang="scss">
.btn_bac_start {
  background: rgba(234, 57, 41, 1);
}
.btn_bac_proceed {
  background: rgba(251, 149, 64, 1);
}
.btn_bac_finish {
  background: rgba(255, 70, 96, 1);
}
.btn_bac_over {
  background: #888;
}
.content {
  width: 100%;
  height: 208px;
  padding: 9px;
  box-sizing: border-box;
  // background: #fff;
  border-radius: 24px;
  .bar {
    width: 286px;
  }
  > .img {
    width: 156px;
    height: 156px;
    // background: red;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > div {
    height: 156px;
  }
  .btn {
    width: 140px;
    height: 56px;

    border-radius: 28px;
    margin-left: 18px;
  }
  .btn1 {
    background: linear-gradient(to right, #ff7944, #ff3a55);
  }
  .btn2 {
    background-color: #fb9540;
  }
  .btn3 {
    background-color: #9f9f9f;
  }
}
</style>
